<template>
	<view class="page">
		<view class="page-top">
			<image :src="form.eimg" mode=""></image>
		</view>
		<view class="page-con">
			<view class="club-box">
				<view class="club-main">
					<view class="club-pic">
						<image :src="form.arvoAss.alogo" mode=""></image>
					</view>
					<view class="club-title">
						{{form.arvoAss.aname}}
					</view>
				</view>
				<view class="club-desc">
					{{form.arvoAss.acontent}}
				</view>
			</view>
			<view class="activity-box">
				<!-- <view class="activity-main">
				<view class="activity-pic">

				</view>
				<view class="activity-auth">
					周XX
				</view>
				<view class="activity-date">
					2小时
				</view>
			</view> -->
				<view class="activity-title">
					{{form.title}}
				</view>
				<view class="activity-desc">
					{{form.introduce}}
				</view>
				<view class="activity-con">
					<mp-html :content="form.ebriefly" />
				</view>
			</view>
		</view>
		<view class="btn-box" v-if="form.status===1">
			<view class="btn" @click="toSign">
				我要报名
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getDetailById
	} from '@/api/xiehui.js'
	import {
		createOrders
	} from '@/api/order.js'
	export default {
		data() {
			return {
				id: '',
				form: {
					arvoAss: {
						alogo: ''
					},
				},
			}
		},
		onLoad(options) {
			console.log(options);
			this.id = options.id;
			this.getDetail();
		},
		methods: {
			getDetail() {
				getDetailById({
					id: this.id
				}).then((res) => {
					this.form = res.data;
				})
			},
			toSign() {
				let params = {
					"from": "weixin",
					"isChannel": "0", //0-微信公众号 ，1-微信小程序
					"odescribe": 1, //1-参加活动，2-加入协会
					"oremark": this.id, //活动id/协会id
					"payPrice": 0.1,
					"payType": "weixin",
				};
				let uid = uni.getStorageSync('userInfo').uid;
				let key = `${uid}${new Date().getTime()}`;
				createOrders(key, params).then((res) => {
					let orderId=res.data.result.orderId;
					uni.redirectTo({
						url: '/pages/activitySign/index?id='+this.id+'&orderId='+orderId
					})
				}).catch((err) => {
					let data = err.data;
					if (data.status === 402) {
						uni.showModal({
							title: "提示",
							content: '您还未加入协会，是否立即缴费？',
							success: (res) => {
								if (res.confirm) {
									uni.redirectTo({
										url: '/pages/join/index'
									})
								} else if (res.cancel) {
									console.log("用户点击取消");
								}
							},
						});
					} else {
						uni.showToast({
							title: data.msg,
							icon: 'none'
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
		padding-bottom: 150rpx;
	}
	.page-con{
		padding: 0 30rpx;
	}
	image {
		width: 100%;
		height: 100%;
	}

	.page-top {
		height: 382rpx;
		border-radius: 12rpx;
		overflow: hidden;
		background-color: #ccc;
	}

	.activity-desc {
		padding: 20rpx 0;
	}

	.club-box {
		margin-top: 34rpx;

		.club-main {
			display: flex;
			align-items: center;

			.club-pic {
				width: 85rpx;
				height: 85rpx;
				border-radius: 50%;
				overflow: hidden;
				background-color: #ccc;
			}

			.club-title {
				margin-left: 24rpx;
				color: #171717;
				font-size: 32rpx;
				font-weight: bold;
			}
		}

		.club-desc {
			margin-top: 36rpx;
			color: #171717;
			font-size: 28rpx;
		}
	}

	.activity-box {
		margin-top: 50rpx;

		.activity-main {
			display: flex;
			align-items: center;

			.activity-pic {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				overflow: hidden;
				background-color: #ccc;
			}

			.activity-auth {
				margin-left: 24rpx;
				color: #171717;
				font-size: 32rpx;
				font-weight: bold;
			}

			.activity-date {
				margin-left: 24rpx;
				color: #868D93;
				font-size: 26rpx;
			}
		}

		.activity-title {
			margin-top: 36rpx;
			font-size: 32rpx;
			padding: 20rpx 0;
			font-weight: bold;
		}
	}

	.btn-box {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: 9;
		background-color: #fff;
		height: 144rpx;
		padding: 0 60rpx;
		display: flex;
		align-items: center;

		.btn {
			height: 90rpx;
			flex: 1;
			text-align: center;
			line-height: 90rpx;
			color: #fff;
			font-size: 34rpx;
			background: #0F7CFF;
			border-radius: 50rpx;
		}
	}
</style>
